<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
// import { CavansDemo } from "@/views/aidutu";
const pp = defineProps<{ chat?: Chat.Chat;base64: string }>()
const emits = defineEmits(['success'])
const st = ref({ q: '' })
const ifdiv = ref<HTMLIFrameElement>()
onMounted(() => {
  // iframe.contentWindow && iframe.contentWindow.postMessage( JSON.stringify({act:'del',obj }), '*');
  const data = {
    instance_id: '1', // 固定值
    custom_id: '2', // 固定值
    channel_id: '3', // 固定值
    guild_id: '4', // 固定值
    frame_id: '5', // 固定值
    platform: 'desktop', // 固定值
    prompt: pp.chat?.text, // 按实际传入
    img_type: 'png', // 按实际传入
    // ,img_info:''
    img_info: JSON.stringify({ image_url: '', prompt: 'sunglasses' }), // 按实际传入
  }
  st.value.q = Object.keys(data).map(key => `${key}=${encodeURIComponent(data[key])}`).join('&')
  window.addEventListener('message', messageFun)
})
onUnmounted(() => {
  window.removeEventListener('message', messageFun)
})

// 收到iframe的消息
const messageFun = (e: MessageEvent) => {
  // console.log('我收到消息了', e.data );
  if (!e?.data)
    return
  const obj = JSON.parse(e.data)
  emits('success', obj)
}
const loadOk = (e: Event) => {
  // console.log('loadOk','good news' );
  const iframe = e.target as HTMLIFrameElement
  iframe.contentWindow && iframe.contentWindow.postMessage(JSON.stringify({ act: 'go', img_info: { image_url: pp.base64 == '' ? pp.chat?.opt?.imageUrl : pp.base64, prompt: '' } }), '*')// pp.chat?.text
}
</script>

<template>
  <!-- <iframe @load="loadOk" ref="ifdiv" :src="`./mitf/index.html?${st.q}`"  class=" h-[80vh] w-full" style="border-width: 0px; border-style: none; overflow: hidden;" v-if="st.q"></iframe> -->
  <iframe v-if="st.q" ref="ifdiv" :src="`https://static.aitutu.cc/res/mitf/index.html?${st.q}`" class=" h-[80vh] w-full" style="border-width: 0px; border-style: none; overflow: hidden;" @load="loadOk" />
</template>
